<template>
  <div>

    <div class="container">
      <div class="handle-box">

        <el-input v-model="query.name" placeholder="管理员账号" clearable class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addVisible = true">新增</el-button>
        <!-- ✅ 导入导出按钮 -->
      </div>

      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        
      >
       
        <el-table-column prop="username" label="管理员账号" align="center" ></el-table-column>
        <el-table-column prop="isSuperAdmin" label="管理员类型" align="center">
          <template slot-scope="scope">
            <span>{{ getAdminType(scope.row.isSuperAdmin) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >重制密码</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.row.adminId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="新增管理员" :visible.sync="addVisible" width="30%">
      <el-form
        ref="form"
        :model="addForm"
        :rules="rules"
        label-width="100px"
      >
        <!-- 手机号输入 -->
        <el-form-item label="手机号" prop="username">
          <el-input v-model="addForm.username" placeholder="请输入手机号" />
        </el-form-item>
      
        <!-- 管理员类型选择 -->
        <el-form-item label="管理员类型" prop="isSuperAdmin">
          <el-select v-model="addForm.isSuperAdmin" placeholder="请选择管理员类型">
            <el-option label="车辆管理员" :value="1"></el-option>
            <el-option label="收费管理员" :value="2"></el-option>
            <el-option label="图片管理员" :value="3"></el-option>
            <el-option label="住宿管理员" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import requests from '../utils/request'

export default {
    name: 'basetable',
    data() {
        return {
          query: {
              name: '',
              pageIndex: 1,
              pageSize: 30
          },
          tableData: [],
          exportData: [],
          userType: [],
          conferenceData: [],
          editVisible: false,
          addVisible: false,
          exportVisible: false,
          pageTotal: 0,
          form: {},
          idx: -1,
          id: -1,
          form: {
            conferenceId: ''
          },
          addForm:{
            username: '',
            isSuperAdmin: null
          },
          rules: {
            username: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入合法的11位手机号',
                trigger: 'blur',
              },
            ],
            isSuperAdmin: [
              { required: true, message: '请选择管理员类型', trigger: 'change' },
            ]
          },
        };
    },
    created() {
       this.loading()
    },
    methods: {
      //加载数据
      loading() {
        requests.get("/adminAccounts/pageSelect", {
          page: this.query.pageIndex,
          size: this.query.pageSize,
          username: this.query.name
        }).then(res=>{
          this.pageTotal = res.total
          this.tableData = res.data
        });
      },
      // 触发搜索按钮
      handleSearch() {
          this.query.pageIndex = 1;
          this.loading();
      },
      // 删除操作
      handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                  requests.delete("/adminAccounts/delById",{
                    adminId: row
                  }).then(res=>{
                    this.$message.success(res);
                    this.loading()
                  })
                })
      },
      handleEdit(row) {
        this.$confirm(
          `确定要将 ${row.username} 的密码重置为默认密码 "111111" 吗？`,
          '确认操作',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            // 调用后端接口重置密码
            requests.post("/adminAccounts/rewritePassword",row).then(res=>{
              this.$message.success(res)
            })
          })
      },
      // 分页导航
      handlePageChange(val) {
          this.query.pageIndex = val
          this.loading()
      },
      
      getAdminType(type) {
        switch (type) {
          case 1:
            return '车辆管理员';
          case 2:
            return '收费管理员';
          case 3:
            return '图片管理员';
          case 4:
            return '住宿管理员';
          default:
            return '未知';
        }
      },
      //新增操作
      handleAdd(row) {
        this.addForm = {
          username: '',  // 可扩展更多字段
          isSuperAdmin: null
        };
        this.addVisible = true;
      },
      // 取消操作
      cancelAdd() {
        document.activeElement && document.activeElement.blur();
        this.addVisible = false;
        this.$refs.form.resetFields();  // 如果你的 form ref 是 "form"
      },
      // 保存操作
      saveAdd() {
        // 先校验表单
        this.$refs.form.validate(valid => {
          if (!valid) {
            // 校验失败，不提交
            return;
          }
          
          // // 校验成功，调用接口
          requests.post("/adminAccounts/add", this.addForm)
            .then(res => {
              this.$message.success(res);  // 用 success 提示更合适
              this.addVisible = false;    // 请求成功后关闭弹窗
              this.loading();              // 刷新数据
            })
        });
      },

    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
